<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/jquery-confirm.min.css">

		<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				/*padding-top: 40px;*/
				padding-bottom: 50px;
				/*-webkit-perspective: 1200px;
				-moz-perspective: 1200px;
				-ms-perspective: 1200px;
				perspective: 1200px*/
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 80vw;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*height: 100vw;*/
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.speedchart {
				width: 80vw;
				height: 50vw;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top-color: gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: gainsboro;
				font-size: medium;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			.addTerminal {
				width: 80%;
				position: absolute;
				bottom: 20px;
				left: 10%;
				display: block;
			}
			
			.addTerminal a {
				width: 100%;
				font-size: x-large;
				margin-bottom: 10px;
			}
			
			.mui-card {
				/*width: 80%;
				left: 10%;*/
				box-shadow: 0px 0px 10px #333333;
			}
			
			.terminalNameSpan {
				text-align: center;
				color: white !important;
				font-size: large;
			}
			
			.mui-table-view {}
			
			.mui-table-view-cell {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#9933cc), to(#6699ff));
			}
			
			.mui-table-view-cell>a:not(.mui-btn).mui-active {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#6699ff), to(#9933cc));
			}
		</style>

	</head>

	<body>
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header"><span id="span_filterr">过滤</span>
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="">
				</div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<ul class="mui-table-view" id="terminaldiv">
				</ul>
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<!--<div class="mui-card-footer">
				
				
			</div>-->
		</div>

		<li class="mui-table-view-cell mui-collapse" id="terminal-template" style="display: none;">
			<a class="mui-navigate-right terminalNameSpan" id="a_terminalNameSpan" href="#">设备报警</a>
			<div class="mui-collapse-content">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label id="label_warnName">报警名称</label>
						<input type="text" class="mui-input-clear warnName" placeholder="" style="border: 1px;">
					</div>
					<div class="mui-input-row" style="height:  auto;">
						<label id="label_warnInfo">报警信息</label>
						<textarea  type="text" class="mui-input-clear warnDesp" readonly="readonly" placeholder=""></textarea>
					</div>
					<div class="mui-input-row">
						<label id="label_warnType">所属类型</label>
						<input type="text" class="mui-input-clear warnType" readonly="readonly" placeholder="">
					</div>
					<div class="mui-input-row">
						<label id="label_time">发生时间</label>
						<input type="text" class="mui-input-clear warnTime" readonly="readonly" placeholder="">
					</div>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-primary btn-ok btn-terminal" id="btn_known">知道了</button>
						<!--<button type="button" class="mui-btn mui-btn-success btn-reset">恢复</button>-->
						<button type="button" class="mui-btn mui-btn-danger btn-fixed btn-terminal" id="btn_fixed">已处理</button>
					</div>
				</form>
			</div>
		</li>

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="../js/jquery-confirm.min.js"></script>
		<script src="../js/dateformat.js"></script>
		<script type="text/javascript" src="../libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript">
			var isEn=false;
			function initList() {
				
				if(app.getLanguage() == en) {
					isEn = true;
					jQuery.i18n.properties({
						name: 'Messages',
						path: '../bundle/',
						mode: 'both',
						language: app.getLanguage(),
						async: true,
						callback: function() {

							jQuery('#span_filterr').html(span_filterr);
							jQuery('#a_terminalNameSpan').html(a_terminalNameSpan);
							jQuery('#label_warnName').html(label_warnName);
							jQuery('#label_warnInfo').html(label_warnInfo);
							jQuery('#label_warnType').html(label_warnType);
							jQuery('#label_time').html(label_time);
							jQuery('#btn_known').html(btn_known);
							jQuery('#btn_fixed').html(btn_fixed);

						}
					});
				}
				
				app.freshWarnInfo(function(warninfolist) {
					app.getTerminal("", function(terminals) {
						app.getWarnConfig("", function(warnConfigs) {
							var terminaldiv = jQuery("#terminaldiv").empty();
							console.log(terminals);
							console.log(warnConfigs);
							console.log(warninfolist);
							jQuery.each(warninfolist.data, function(index, data) {
								var template = jQuery("#terminal-template").clone();
								template.attr("id", "warninfo" + data.id);
								template.data("id", data.id);
								template.show();
								var terminalinfo = null;
								for(var x in terminals) {
									if(terminals[x].id == data.terminalId) {
										terminalinfo = terminals[x];
										break;
									}
								}
								if(terminalinfo != null) {
									template.find(".terminalNameSpan").html("设备："+terminalinfo.terminalName+"正在报警");
								}
								var warnConfig=null;
								for(var x in warnConfigs){
									if(warnConfigs[x].id=data.warnConfigID){
										warnConfig=warnConfigs[x];
										break;
									}
								}
								if(warnConfig!=null){
									template.find(".warnName").val(warnConfig.name);
									template.find(".warnDesp").val(data.description);
									template.find(".warnType").val(app.WarnConfigTypeEnStr[warnConfig.ruleType]);
									template.find(".warnTime").val(new Date(data.time).toString());
								}
								
								terminaldiv.append(template);
							});
						});

					});
				});
			}

			function initPage() {
				initList();
			}
			
			(function($, doc) {
				$.plusReady(initPage);
			}(mui, document));

			//jQuery(document).ready(initPage);
		</script>
	</body>

</html>